

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>个人主页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
  <link rel="stylesheet" href="assets/css/main.css" />
  <link rel="stylesheet" href="assets/css/you.css" / charset="utf-8">
    <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->

  <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

  <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
  <script src="assets/js/jquery.lazyload.min.js"></script>
</head>
<body>
  <style type="text/css" media="screen">


  </style>

    <!-- Header -->
      <header id="header" style=" overflow: hidden;">
          <div  style=" position: relative;">
            <!-- <div class="futiao" ></div> -->
            <!-- <div class="futiao2" ></div> -->
          </div>


          <div class="inner">
            <a href="#" class="image avatar"><img src="images/xiang.jpg" alt="" /></a>
            <h1><strong> 吴耀安</strong>
            <span style=" color: #484848;font-size: 0.9em;">视觉丨运营设计师</span><br />
              <!-- <a href="http://html5up.net">WELCOME</a> --></h1>
          </div>

      </header>

    <!-- Main -->
      <div id="main">

        <!-- One -->
          <section id="one">
            <header class="major animate__fadeInRight">
              <h2 style="margin: 0 0 0.6em 0;font-weight: bold;">我的工作经历<br>
              </h2>
              </h2>
              <h2 style="
    margin-top: -0.4em;font-weight: 400;
">MY WORK EXPERIENCE.</h2>
            </header>

            <!-- <span class="kkt">•</span><p>   2015 / 10 - 2016 / 03<br /> <p class="hp"> 小型网络公司&nbsp;&nbsp;    网页 | UI设计师</p>  <p class="ky">banner图设计、活动页面的设计，代码和UI设计的学习</p></p> -->
            <ul class="actions ">
            <span class="kkt ">•</span><p>   2016 / 04 - 2018 / 03<br /> <p class="hp"> 天河电脑城&nbsp;&nbsp;   网页 | UI设计师 </p>  <p class="ky">
            主要负责天河购商城PC和移动端的页面设计，活动专题的设计和代码的编写，后期参与商城体验店的活动线下物料设计和装修方案输出（综合能力得到整体提升）</p></p>


            <span class="kkt ">•</span><p>   2018 / 04 - 2021 / 06<br /> <p class="hp"> 尚德机构&nbsp;&nbsp;   视觉 | 运营设计师 </p>  <p class="ky">
              主要负责公司事业部日常运营设计，包括集团活动冲高、群运营和小程序课程海报设计，对接SOP流量部门的广告创意和部分网页制作</p></p>
            <div></div>
<!--             <ul class="actions">
                <li></li>
            </ul> -->
          </section>

        <!-- Two -->
          <section id="two">
            <h2>我的作品</h2>
            <div class="row">
              <article class="6u 12u$(xsmall) work-item">
                <a href="javascript:;" class="image fit thumb_1"><img src="images/thumbs/01.jpg" alt="" /></a>
                <h3><a href="item0.html" target="_blank">活动运营</a></h3>

              </article>

              <article class="6u$ 12u$(xsmall) work-item">
                <a href="javascript:;" class="image fit thumb_2"><img src="images/thumbs/02.jpg" alt="" /></a>
                <h3><a href="item1.html" target="_blank">课程海报</a></h3>

              </article>
              <article class="6u 12u$(xsmall) work-item">
                <a href="javascript:;" class="image fit thumb_3"><img src="images/thumbs/04.jpg" alt="" /></a>
                <h3><a href="item3.html" target="_blank">狐逻IP形象</a></h3>

              </article>
              <article class="6u$ 12u$(xsmall) work-item">
                <a href="javascript:;" class="image fit thumb_4"><img src="images/thumbs/05.jpg" alt="" /></a>
                <h3><a href="item4.html" target="_blank">线下物料</a></h3>
<!--
              </article>

                            <article class="6u 12u$(xsmall) work-item">
                <a href="javascript:;" class="image fit thumb_5"><img src="images/thumbs/05.jpg" alt="" /></a>
                <h3><a href="item4.html" target="_blank">狐逻IP形象</a></h3>

              </article>
              <article class="6u$ 12u$(xsmall) work-item">
                <a href="javascript:;" class="image fit thumb_6"><img src="images/thumbs/06.jpg" alt="" /></a>
                <h3><a href="item5.html" target="_blank">线下物料</a></h3>

              </article> -->




            </div>

          </section>

        <!-- Three -->
          <section id="three">
            <h2>给我留言</h2>

            <div class="row">
              <div class="8u 12u$(small)">
                <form method="post" action="#">
                  <div class="row uniform 50%">
                   <!-- <div class="6u 12u$(xsmall)"><input type="text" name="name" id="name" placeholder="Name" /></div>
                    <div class="6u$ 12u$(xsmall)"><input type="email" name="email" id="email" placeholder="Email" /></div> -->
                    <div class="12u$"><textarea name="message" id="message" placeholder="Message" rows="4"></textarea></div>
                  </div>
                </form>
                <ul class="actions">
                  <li><input type="submit" value="发送消息" /></li>
                </ul>
              </div>
              <div class="4u$ 12u$(small)">
                <ul class="labeled-icons">
                  <li>
                    <h3 class="icon "><span style="line-height: 33px;"><img src="images/cn_1.png" alt="" style="width: 20px;"></span></h3>
                    广州天河东圃镇<br />

                  </li>
                  <li>
                    <h3 class="icon "><span style="line-height: 33px;"><img src="images/cn_3.png" alt="" style="width: 20px;"></span></h3>
                    189-3849-8909（WeChat）
                  </li>
                  <li>
                    <h3 class="icon "><span style="line-height: 33px;"><img src="images/cn_2.png" alt="" style="width: 20px;"></span></h3>
                    619110278@qq.com
                  </li>
                </ul>
              </div>
            </div>
          </section>



      </div>

    <!-- Footer -->
    <style type="text/css">
      .footer .icons li {

        width: 46px;
        display: block;
        height: 46px;
        text-align: center;
        line-height: 46px;
        border-radius: 41px;
        color: #4ca5ff;
      }
    </style>

      <footer id="footer">
        <div class="inner">
          <ul class="icons">
            <li><a  style="
    width: 46px;
    display: block;
    height: 46px;
    text-align: center;
    line-height: 46px;
    border-radius: 41px;
    color: #81bfff;"
    href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=619110278&website=www.oicqzone.com" class="icon fa-qq"><span class="label">qq</span></a></li>
            <li>
            <a style="
    width: 46px;
    display: block;
    height: 46px;
    text-align: center;
    line-height: 46px;
    border-radius: 41px;
    color: #81bfff;" href="#" class="icon fa-wechat"><span class="label">wechat</span></a></li>
            <li><a style="

    width: 46px;
    display: block;
    height: 46px;
    text-align: center;
    line-height: 46px;
    border-radius: 41px;
    color: #81bfff;"
     href="http://weibo.com/3180813193/profile?rightmod=1&wvr=6&mod=personinfo"target="_blank" class="icon fa-weibo"><span class="label">weibo</span></a></li>

          </ul>
          <!-- <ul class="copyright">
            <li>&copy; Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
          </ul> -->
        </div>
      </footer>


    <script>
    ;!function(){


      //弹出一个iframe层
      $('.thumb_1').on('click', function(){
        layer.open({
        type: 2,
        title: 'Design',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['70%' , '88%'],
        content: 'item0.html'
        });
      });
      // 第二个
      $('.thumb_2').on('click', function(){
        layer.open({
        type: 2,
        title: 'Design',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['70%' , '88%'],
        content: 'item1.html'
        });
      });
      // 第三个
      $('.thumb_3').on('click', function(){
        layer.open({
        type: 2,
        title: 'Design',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['70%' , '88%'],
        content: 'item3.html'
        });
      });
      // 第四个
      $('.thumb_4').on('click', function(){
        layer.open({
        type: 2,
        title: 'Design',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['70%' , '88%'],
        content: 'item4.html'
        });
      });
          // 第五个
      $('.thumb_5').on('click', function(){
        layer.open({
        type: 2,
        title: 'Design',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['70%' , '88%'],
        content: 'item4.html'
        });
      });

          // 第六个
      $('.thumb_6').on('click', function(){
        layer.open({
        type: 2,
        title: 'Design',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['70%' , '88%'],
        content: 'item5.html'
        });
      });

      }();
    </script>
    <!-- Scripts -->


      <script src="assets/js/skel.min.js"></script>
      <script src="assets/js/util.js"></script>
      <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
      <script src="assets/js/main.js"></script>
<script type="text/javascript">
(function () {
 var imgList = [], // 页面所有img元素集合
 delay, // setTimeout 对象
 offset, //偏移量，用于指定图片距离可视区域多少距离，进行加载
 time, // 延迟载入时间
 _selector; // 选择器 默认为 .m-lazyload

 function _isShow(el) {
 var coords = el.getBoundingClientRect();
 return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
 }

 function _loadImage() {
 for (var i = imgList.length; i--;) {
  var el = imgList[i];
  if (_isShow(el)) {
  el.src = el.getAttribute('data-src');
  el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
  imgList.splice(i, 1);
  }
 }
 }

 function _delay() {
 clearTimeout(delay);
 delay = setTimeout(function () {
  _loadImage();
 }, time);
 }

 function ImageLazyload(selector, options) {
 var defaults = options || {};
 offset = defaults.offset || 0;
 time = defaults.time || 250;
 _selector = selector || '.m-lazyload';
 this.getNode();
 _delay();//避免首次加载未触发touch事件,主动触发一次加载函数
 if (defaults.iScroll) {
  defaults.iScroll.on('scroll', _delay);
  defaults.iScroll.on('scrollEnd', _delay);
 } else {
  window.addEventListener('scroll', _delay, false);
 }
 }
 ImageLazyload.prototype.getNode = function () {
 imgList = [];
 var nodes = document.querySelectorAll(_selector);
 for (var i = 0, l = nodes.length; i < l; i++) {
  imgList.push(nodes[i]);
 }
 };
})();
</script>



</script>
</body>
</html>